import { camelize } from './util.js'
const trim = function(s) {
	return (s || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
}
export const on = function(
	element,
	event,
	handler, // EventListenerOrEventListenerObject
	useCapture = false,
) {

	if (element && event && handler) {
		element.addEventListener(event, handler, useCapture)
	}
}

export const off = function(
	element,
	event,
	handler, // EventListenerOrEventListenerObject
) {
	if (element && event && handler) {
		element.removeEventListener(event, handler, false)
	}
}

export function hasClass(el, cls) {
	if (!el || !cls) return false
	if (cls.indexOf(' ') !== -1)
		throw new Error('className should not contain space.')
	if (el.classList) {
		return el.classList.contains(cls)
	} else {
		return (` ${el.className} `).indexOf(` ${cls} `) > -1
	}
}

export function addClass(el, cls) {
	if (!el) return
	let curClass = el.className
	const classes = (cls || '').split(' ')

	for (let i = 0, j = classes.length; i < j; i++) {
		const clsName = classes[i]
		if (!clsName) continue

		if (el.classList) {
			el.classList.add(clsName)
		} else if (!hasClass(el, clsName)) {
			curClass += ` ${clsName}`
		}
	}
	if (!el.classList) {
		el.className = curClass
	}
}

export function removeClass(el, cls) {
	if (!el || !cls) return
	const classes = cls.split(' ')
	let curClass = ` ${el.className} `

	for (let i = 0, j = classes.length; i < j; i++) {
		const clsName = classes[i]
		if (!clsName) continue

		if (el.classList) {
			el.classList.remove(clsName)
		} else if (hasClass(el, clsName)) {
			curClass = curClass.replace(` ${clsName} `, ' ')
		}
	}
	if (!el.classList) {
		el.className = trim(curClass)
	}
}


// Here I want to use the type CSSStyleDeclaration, but the definition for CSSStyleDeclaration
// has { [index: number] } in its type annotation, which does not satisfy the method
// camelize(s)
// Same as the return type
export const getStyle = function(
	element,
	styleName,
) {
	if (!element || !styleName) return null
	styleName = camelize(styleName)
	if (styleName === 'float') {
		styleName = 'cssFloat'
	}
	try {
		const style = element.style[styleName]
		if (style) return style
		const computed = document.defaultView.getComputedStyle(element, '')
		return computed ? computed[styleName] : ''
	} catch (e) {
		return element.style[styleName]
	}
}

export function setStyle(
	element,
	styleName,
	value,
) {
	if (!element || !styleName) return

	if (_.isObject(styleName)) {
		Object.keys(styleName).forEach(prop => {
			setStyle(element, prop, styleName[prop])
		})
	} else {
		styleName = camelize(styleName)
		element.style[styleName] = value
	}
}

export function removeStyle(element, style) {
	if (!element || !style) return

	if (_.isObject(style)) {
		Object.keys(style).forEach(prop => {
			setStyle(element, prop, '')
		})
	} else {
		setStyle(element, style, '')
	}
}

export const getOffsetTop = (el) => {
	let offset = 0
	let parent = el

	while (parent) {
		offset += parent.offsetTop
		parent = parent.offsetParent
	}

	return offset
}

export const beforeunloadHandler = (e) =>{
	e = e || window.event;
	if (e) {
	  e.returnValue = '系统可能不会保存您所做的更改。'
	}
	return '系统可能不会保存您所做的更改。'
}
